<template>
    <div class="container" v-if="store.isSearch">
        <el-card style="width: 680px">
            <template #header>
                <div class="card-header">
                    <div class="search">
                        <h3>字段查询</h3>
                        <el-input v-model="input" @keydown.enter="search" style="width: 240px"
                            placeholder="Please input" />
                    </div>
                </div>
            </template>
            <el-table :data="store.curData" border style="width: 100%">
                <el-table-column prop="name" label="事故类型" align="center" />
                <el-table-column prop="area" label="肇事地区" align="center" />
                <el-table-column prop="driver" label="肇事人" align="center" />
                <el-table-column prop="car_num" label="肇事车辆" align="center" />
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="success" @click="isHandling(scope.$index)">已处理</el-button>
                        <el-button type="warning" @click="positionZoom(scope.row)">定位</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" @current-change="handlePage" :page-size="4"
                :total="store.total" />
        </el-card>

        <el-button type="danger" class="close" @click="close">X</el-button>
    </div>
</template>

<script setup>
import { mapStore } from '@/store';
import { onMounted, ref } from 'vue';
import { event } from '@/hooks/eventHook';
const { positionZoom, isHandling } = event()
const store = mapStore()
const input = ref()
const searchList = ref([])


const close = () => {
    store.isSearch = false
}

const handlePage = (page) => {
    store.curData = store.addLists.slice((page - 1) * 4, page * 4)
}

const search = () => {
    searchList.value = store.addLists.filter(item => item.driver.startsWith(`${input.value}`))
    console.log(searchList.value)
    store.curData = searchList.value
}
</script>

<style scoped lang="scss">
.container {
    position: fixed;
    top: 15%;
    left: 30%;
    z-index: 1000;

    .search {
        display: flex;
        justify-content: center;
        gap: 30px;
    }

    .close {
        position: absolute;
        top: 0;
        right: 0%;
        z-index: 1000;

    }
}
</style>
